@charset "UTF-8";
.food-container {
  position: relative;
  height: 100vh;
  padding: 20rpx;
}

.food-container .top-container .top {
  display: flex;
  width: 100%;
  justify-content: center;
}

.food-container .top-container .top .image-wrapper {
  width: 160rpx;
  height: calc(160rpx * 4 / 13);
  position: relative;
}

.food-container .top-container .top .image-wrapper .image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.food-container .top-container .swiper-container {
  display: flex;
  justify-content: center;
  width: 95%;
  margin: 20rpx auto;
}

.food-container .top-container .locate-container {
  width: 100%;
  padding: 20rpx 40rpx;
}

.food-container .top-container .locate-container .image-wrapper {
  width: 240rpx;
  aspect-ratio: 227 / 62;
  position: relative;
}

.food-container .top-container .locate-container .image-wrapper .image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.food-container .top-container .locate-container .address {
  display: flex;
  align-items: center;
}

.food-container .top-container .locate-container .address .icon {
  margin-right: 20rpx;
}

.food-container .top-container .locate-container .address span {
  color: #acacac;
  font-size: 28rpx;
}

.food-container .bottom-container {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--height) - 40rpx);
}

.food-container .bottom-container .left {
  width: 200rpx;
  background-color: #f1f1f1;
  border-radius: 0 32rpx 0 0;
}

.food-container .bottom-container .left .scroll {
  height: 100%;
  padding-bottom: 240rpx;
  /* 根据 footer-container 的 bottom 调整 */
  box-sizing: border-box;
}

.food-container .bottom-container .left .scroll .tap-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30rpx 40rpx 0 40rpx;
  background-color: #f1f1f1;
}

.food-container .bottom-container .left .scroll .tap-item .title {
  color: #979797;
  font-size: 28rpx;
  font-weight: 600;
}

.food-container .bottom-container .left .scroll .tap-item .subtitle {
  color: #979797;
  font-size: 16rpx;
}

.food-container .bottom-container .left .scroll .tap-item .tap-line {
  width: 80%;
  margin-top: 30rpx;
  border-bottom: 1px solid #979797;
}

.food-container .bottom-container .right {
  width: calc(100% - 200rpx);
  height: 100%;
}

.food-container .bottom-container .right .scroll {
  height: 100%;
  box-sizing: border-box;
}

.food-container .bottom-container .right .scroll .scroll-container {
  width: 100%;
}

.food-container .bottom-container .right .scroll .scroll-container .type {
  font-size: 28rpx;
  font-weight: 600;
  margin: 30rpx 20rpx;
}

.food-container
  .bottom-container
  .right
  .scroll
  .scroll-container
  .good-detail {
  display: flex;
  justify-content: space-between;
  margin: 20rpx;
}

.food-container
  .bottom-container
  .right
  .scroll
  .scroll-container
  .good-detail
  .image-box {
  position: relative;
  width: 160rpx;
  height: 160rpx;
}

.food-container
  .bottom-container
  .right
  .scroll
  .scroll-container
  .good-detail
  .image-box
  .good-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16rpx;
}

.food-container
  .bottom-container
  .right
  .scroll
  .scroll-container
  .good-detail
  .image-box
  .remain {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 24rpx;
  color: #cfcfcf;
  background-color: #5c5c5c;
  text-align: center;
  border-radius: 0 0 16rpx 16rpx;
}

.food-container
  .bottom-container
  .right
  .scroll
  .scroll-container
  .good-detail
  .info-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(100% - 160rpx);
  margin-left: 20rpx;
}

.food-container
  .bottom-container
  .right
  .scroll
  .scroll-container
  .good-detail
  .info-box
  .top
  .title {
  font-weight: 600;
}

.food-container
  .bottom-container
  .right
  .scroll
  .scroll-container
  .good-detail
  .info-box
  .top
  .subtitle {
  color: #979797;
  font-size: 28rpx;
}

.food-container
  .bottom-container
  .right
  .scroll
  .scroll-container
  .good-detail
  .info-box
  .bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.food-container
  .bottom-container
  .right
  .scroll
  .scroll-container
  .good-detail
  .info-box
  .bottom
  .price-box {
  display: flex;
  align-items: baseline;
}

.food-container
  .bottom-container
  .right
  .scroll
  .scroll-container
  .good-detail
  .info-box
  .bottom
  .price-box
  .symbol {
  font-size: 24rpx;
}

.food-container
  .bottom-container
  .right
  .scroll
  .scroll-container
  .good-detail
  .info-box
  .bottom
  .price-box
  .price {
  font-weight: 600;
}

.food-container .footer-container {
  z-index: 100;
  position: fixed;
  bottom: 110rpx;
  left: 0;
  width: 100%;
}

.food-container .footer-container .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  height: 50rpx;
  border-radius: 32rpx;
  background-color: #fff;
  box-shadow: 1rpx 1rpx 5rpx #888888;
}

.active-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30rpx 40rpx 0 40rpx;
  background-color: #fff;
}

.active-item .title {
  color: #979797 !important;
  font-size: 28rpx !important;
  font-weight: 600 !important;
}

.active-item .subtitle {
  color: #979797;
  font-size: 16rpx;
}

.active-item .tap-line {
  width: 80%;
  margin-top: 30rpx;
  border-bottom: 1px solid #979797;
}
